<%@ page contentType="text/html;charset=UTF-8"%>
<%@ include file="/WEB-INF/views/include/taglib.jsp"%>
<html>
<head>

<link
	href="${ctxStatic}/bootstrap/2.3.1/css_${not empty cookie.theme.value ? cookie.theme.value : 'cerulean'}/bootstrap.min.css"
	type="text/css" rel="stylesheet" />
<script src="${ctxStatic}/bootstrap/2.3.1/js/bootstrap.min.js"
	type="text/javascript"></script>
<link href="${ctxStatic}/bootstrap/2.3.1/awesome/font-awesome.min.css"
	type="text/css" rel="stylesheet" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- <link href='http://fonts.googleapis.com/css?family=Roboto'
	rel='stylesheet' type='text/css'> -->
<link rel="stylesheet" href="${ctxStatic}/jQueryCalendar/calendar.css">
<script src="${ctxStatic}/jQueryCalendar/js/jquery.js"></script>
<script src="${ctxStatic}/jQueryCalendar/js/calendar.js"></script>
<title>主页</title>
<meta name="decorator" content="default" />

<style type="text/css">
.panel-head-001 {
	line-height: 25px;
	height: 25px;
	border-radius: 7px 7px 0px 0px;
	padding-left: 13px;
	font-size: 15px;
	background-color: #2fa4e7;
	color: #fff;
}

#info-right{
	margin-left: 18px;
}

#info-left{
	padding-left: 10px;
}
</style>

<style type="text/css">
html {
	font: 500 14px 'roboto';
	color: #333;
	background-color: #fafafa;
}

a {
	text-decoration: none;
}

ul,ol,li {
	list-style: none;
	padding: 0;
	margin: 0;
}

#demo {
	width: auto;
	margin: auto;
	background-color: aliceblue;
}

p {
	margin: 0;
}

#ca {
	padding-left: 18px;
}

#dt {
	margin: 30px auto;
	height: 28px;
	width: 200px;
	padding: 0 6px;
	border: 1px solid #ccc;
	outline: none;
}
</style>
</head>
<body onload=initial();>

	<div class="row-fluid">
		<div id="info-left" class="span8">
			<div class="panel-head-001">待处理工单</div>
			<div class="pre-scrollable" style="height: 250px;">
				<table id="contentTable" class="table table-striped table-condensed">
					<tr>
						<th>编号</th>
						<th>工单号</th>
						<th>操作人</th>
						<th>服务提供方</th>
						<th>服务调用方</th>
						<th>紧急程度</th>
						<th>重复投诉次数</th>
						<th>操作时间</th>
						<th>操作</th>
					</tr>
					<c:forEach items="${workOrderList}" var="workOrder">
						<tr id="${workOrder.id}" class="${workOrder.type}">
							<td>${workOrder.id }</td>
							<td><a href="${ctx}/oa/workOrder/form?id=${workOrder.id}">${workOrder.serialNo}</a></td>
							<td>${workOrder.opPerson}</td>
							<td>${workOrder.serSupplier }</td>
							<td>${workOrder.serCaller }</td>
							<td>${workOrder.urgentDegree}</td>
							<td>${workOrder.repeatComplaintTimes}</td>
							<td>${workOrder.opTime }</td>
							<td>
								<a href="${ctx}/oa/workOrder/form?id=${workOrder.id}">处理</a>
								<a href="${ctx}/oa/workOrder/sendBack?id=${workOrder.id}" onclick="return confirmx('确定退回到工单池？', this.href)">释放</a>
							</td>
						</tr>
					</c:forEach>
				</table>
			</div>

			<div class="panel-head-001">未查看通知</div>
			<div class="pre-scrollable" style="height: 250px;">
				<table id="contentTable" class="table table-striped table-condensed">
					<thead>
						<tr>
							<th>标题</th>
							<th>类型</th>
							<th>状态</th>
							<th>查阅状态</th>
							<th>更新时间</th>
						</tr>
					</thead>
					<tbody>
						<c:forEach items="${oaNotifyList}" var="oaNotify">
							<tr>
								<td><a
									href="${ctx}/oa/oaNotify/${requestScope.oaNotify.self?'view':'form'}?id=${oaNotify.id}">
										${fns:abbr(oaNotify.title,50)} </a></td>
								<td>${fns:getDictLabel(oaNotify.type, 'oa_notify_type', '')}
								</td>
								<td>${fns:getDictLabel(oaNotify.status, 'oa_notify_status', '')}
								</td>
								<td>
									${fns:getDictLabel(oaNotify.readFlag, 'oa_notify_read', '')}
								</td>
								<td><fmt:formatDate value="${oaNotify.updateDate}"
										pattern="yyyy-MM-dd HH:mm:ss" /></td>
							</tr>
						</c:forEach>
					</tbody>
				</table>
			</div>
		</div>

		<div id="info-right" class="span4">
			<div class="panel-head-001">日历</div>
			<div id="demo">
				<div id="ca"></div>
				<!-- <input type="text" id="dt" placeholder="trigger calendar"> -->
				<div id="dd"></div>
			</div>
			<script>
				$('#ca').calendar({
					width : 320,
					/* height : 320, */
					data : [ {
						date : '2015/12/24',
						value : 'Christmas Eve'
					}, {
						date : '2015/12/25',
						value : 'Merry Christmas'
					}, {
						date : '2016/01/01',
						value : 'Happy New Year'
					} ],
					onSelected : function(view, date, data) {
						console.log('view:' + view)
						
						console.log('data:' + (data || 'None'));
					}
				});
		
				$('#dd').calendar({
					trigger : '#dt',
					zIndex : 999,
					format : 'yyyy-mm-dd',
					onSelected : function(view, date, data) {
						console.log('event: onSelected')
					},
					onClose : function(view, date, data) {
						console.log('event: onClose')
						console.log('view:' + view)
						console.log('date:' + date)
						console.log('data:' + (data || 'None'));
					}
				});
			</script>

		</div>

	</div>

</body>
</html>